<template>
	<div class="class-wrap">
		<div class="tag">
		<span class="sp-tag">
				<el-tag type="success" effect="dark"></el-tag>闲置
		</span>
		<span class="sp-tag">
				<el-tag type="warning" effect="dark"></el-tag>占用
		</span>
		</div>
		<!-- 教室列表 -->
		<div class="calss-body">
			<el-row :gutter="20">
				<el-col :span="6" v-for="(item, index) in classRoomList" :key="index"
					><div
						class="grid-content bg-purple"
						:class="[item.clsr_occupy ? 'activeRoom' : 'noactiveRoom']"
						@mouseover="showMark(index)"
						@mouseout="hideMark"
					>
						{{ item.clsr_name }}
						<div
							class="editor-wrap"
							v-if="item.clsr_occupy"
							v-show="index === showMask"
						>
							<i class="el-icon-edit" @click="beginEdit(item)"></i>
						</div>
						<div class="delect-wrap" v-else v-show="index === showMask">
							<i class="el-icon-edit" @click="beginEdit(item)"></i>
							<i class="el-icon-delete" @click="remove(item)"></i>
						</div></div
				></el-col>
				<el-col :span="6"
					><div class="grid-content bg-purple addRoom">
						<i class="el-icon-plus" @click="beginAdd"></i></div
				></el-col>
			</el-row>
		</div>
		<!-- 新增编辑 -->
		<el-dialog :visible="editor.isEditor">
			<p slot="title">
				<span> 教室管理-{{ editor.isMode ? "新增" : "修改" }} </span>
			</p>
			<el-form
				ref="ruleForm"
				label-width="90px"
				:model="editor.model"
				:rules="editor.rules"
				tatus-icon
			>
				<el-form-item label="教室名字:" prop="clsr_name">
					<el-input
						placeholder="请输入教室名字"
						v-model="editor.model.clsr_name"
						autocomplete="off"
					></el-input>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button type="primary" @click="btnSave">确 定</el-button>
				<el-button @click="editor.isEditor = false">取 消</el-button>
			</div>
		</el-dialog>
	</div>
</template>

<script>
export default {
	name: "classroom",
	data() {
		return {
			editor: {
				isEditor: false,
				isMode: true,
				model: {
					clsr_id: 0,
					clsr_name: "",
				},
				rules: {
					clsr_name: [
						{
							required: true,
							message: "请输入教室名字",
							trigger: "blur",
						},
					],
				},
			},
			classRoomList: [],
			showMask: -1,
		};
	},
	methods: {
		// 初始化表单
		initForm() {
			if (this.$refs.form) this.$refs.form.resetFields();
		},
		beginEdit(data) {
			this.initForm();
			this.editor.isEditor = true;
			this.editor.isMode = false;
			this.editor.model.clsr_id = data.clsr_id;
			this.editor.model.clsr_name = data.clsr_name;
		},
		// 删除
		remove(data) {
			this.$confirm("确定要删除吗?", "提示", {
				confirmButtonText: "确定",
				cancelButtonText: "取消",
				type: "warning",
			})
				.then(() => {
					this.$http({
						url: `/classroom/remove/${data.clsr_id}`,
						method: "get",
					}).then((res) => {
						this.classRoomList.splice(
							this.classRoomList.findIndex(
								(item) => item.clsr_id === data.clsr_id
							),
							1
						);
						this.$message({
							type: "success",
							message: "删除成功!",
						});
					});
				})
				.catch(() => {
					this.$message({
						type: "info",
						message: "已取消删除",
					});
				});
		},
		btnSave() {
			// 保存
			this.$refs.ruleForm
				.validate()
				.then(() => {
					// 验证成功
					if (this.editor.isMode) {
						this.$http({
							url: "/classroom/add",
							method: "post",
							data: {
								clsr_name: this.editor.model.clsr_name,
							},
						}).then((res) => {
							this.editor.model.clsr_id = res;
							this.editor.model.clsr_occupy = 0;
							this.classRoomList.push({
								...this.editor.model,
							});
							this.$message({
								type: "success",
								message: "新增成功",
							});
						});
					} else {
						this.$http({
							url: "/classroom/update",
							method: "post",
							data: {
								...this.editor.model,
							},
						}).then((res) => {
							this.classRoomList.find(
								(item) => item.clsr_id === this.editor.model.clsr_id
							).clsr_name = this.editor.model.clsr_name;
							this.$message({
								type: "success",
								message: "修改成功",
							});
						});
					}
					this.editor.isEditor = false;
				})
				.catch((err) => {
					// 验证失败
				});
		},
		beginAdd() {
			// 开始新增
			this.initForm();
			this.editor.isEditor = true;
			this.editor.isMode = true;
			this.editor.model.clsr_id = 0;
			this.editor.model.clsr_name = "";
		},
		// 请求所有教室
		getClassRoom() {
			this.$http({
				url: "/classroom/all",
				method: "get",
			}).then((res) => {
				console.log(res);
				this.classRoomList = res;
			});
		},
		showMark(index) {
			this.showMask = index;
		},
		hideMark() {
			this.showMask = -1;
		},
	},
	created() {
		this.getClassRoom();
	},
};
</script>
<style lang="stylus" scoped>
.class-wrap
  .calss-body
    .el-col
      margin-bottom 15px
      .bg-purple
        // border-radius 10px
        position relative
        height 120px
        display flex
        align-items center
        font-size 16px
        color white
        cursor pointer
        justify-content center
        border-radius 4px
        overflow hidden
        &.activeRoom
          background-color #e6a23c
        &.noactiveRoom
          background-color #67c23a
        .editor-wrap,.delect-wrap
          position absolute
          top 0
          left 0
          right 0
          bottom 0
          background-color rgba(0,0,0,.7)
          font-size 27px
          color white
        .editor-wrap
           display flex
           align-items center
           justify-content center
        .delect-wrap
           display flex
           align-items center
           justify-content space-around
      .addRoom
        box-shadow 0 0 3px #CDC9C9, 0 0 6px #CDC9C9
        .el-icon-plus
          color black
          font-size 26px
          font-weight bold
  .el-dialog
    p
      padding 10px 0 10px 20px
      color white
      font-size 17px
      background-color #00CD00
	.tag
		display flex
		margin-bottom 30px
		.sp-tag
			display flex
			align-items center
			margin-right 15px	
			.el-tag
				margin-right 5px
				width 20px
				height 20px	
			
</style>
